<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <link href="/static/identify_love/css/mui.min.css" rel="stylesheet"/>
    <link href="/static/identify_love/css/mui.picker.min.css" rel="stylesheet"/>
    <script src="/static/identify_love/js/mui.min.js"></script>
    <script src="/static/identify_love/js/city.data-xzns.js"></script>
    <script src="/static/identify_love/js/mui.picker.min.js"></script>
    <script src="/static/identify_love/js/mui.poppicker.js"></script>
    <script src="/static/identify_love/js/time.place.js"></script>
    <script src="/static/jquery-3.1.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        html {
            font: 14px SimSun, \5B8B\4F53, serif;
            width: 100%;
            height: 100%;
        }

        body {
            height: 100%;
            width: 100%;
            /*background: #FFFFFF url("/static/identify_love/img/add_bg_img.jpg") no-repeat;*/
        }

        a {
            text-decoration: none;
        }

        img {
            border: none;
            width: 100%;
        }

        li {
            list-style: none;
        }

        .container {
            position: relative;
            height: auto;
            width: 100%;
        }

        /*背景图片*/
        .bg_img {
            border: 0;
            vertical-align: bottom;
        }

        .wrapper-content {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }

        /*顶部两张图片container*/
        .header_container {
            text-align: center;
            margin-top: 8rem;
            margin-bottom: 2rem;
        }

        /*‘Ta会议怎样的方式爱你’图片样式*/
        .header_img2 {
            width: 70%;
            margin-bottom: 3rem;
        }

        /*中间container*/
        .content_container {
            left: 10%;
            width: 80%;
            height: 26rem;
            border: 0.5rem solid rgba(255, 255, 255, 0.4);
            position: relative;
            border-radius: 1rem;
            z-index: 1;
            text-align: center;
        }

        /*中间container白色背景*/
        .content_bg {
            background: #fff;
            position: absolute;
            border-radius: 0.5rem;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        /*用户头像Container*/
        .user_img_container {
            width: 6rem;
            height: 6rem;
            text-align: center;
            z-index: 10;
            margin: -3.5rem auto;
        }

        /*皇冠底图样式*/
        .user_master_img {
            position: absolute;
            width: 6rem;
            height: 6rem;
            z-index: 1;
        }

        /*用户头像img*/
        .user_img {
            width: 5rem;
            height: 5rem;
            margin-left: 0.5rem;
            margin-top: 1rem;
            border-radius: 5rem;
            border: 0.3rem solid #fff;
            position: relative;
            z-index: 2;
        }

        /*‘输入信息提示’label 样式*/
        .hint_label {
            text-align: center;
            font-size: 0.8rem;
            color: #abadba;
            margin-top: 5rem;
        }

        /*表单样式*/
        .form {
            width: 15.86rem;
            display: block;
            margin: 0 auto;
        }

        /*表单单个item样式*/
        .form-group {
            width: 100%;
        }

        /*出生时间、出生点提示 label*/
        .form-label {
            font-size: 1.0rem;
            color: #505879;
            width: 100%;
            height: 1.2rem;
            text-align: left;
            margin-top: 1.5rem;
        }

        /* 小字 label样式 */
        .form-label span {
            font-size: 0.8rem;
            margin-left: 1rem;
        }

        .form-group input {
            color: #151e44;
            width: 15.86rem;
            height: 2.57rem;
            display: block;
            font-size: 1.1rem;
            margin-top: 1.3rem;
            outline: none;
            box-shadow: none;
            border-radius: 0;
            -webkit-appearance: none;
            padding-left: 0;
            text-align: left;
            overflow: hidden;
            border: none;
            border-bottom: 1px solid #ebebeb;;
            background-color: #fff;
        }

        /*性别container*/
        .sex_container {
            height: 2rem;
            margin-top: 2rem;
        }

        /*男左侧图片*/
        .male_container img {
            width: 2rem;
            height: 2rem;
            float: left;
        }

        /*男文字*/
        .male_container div {
            width: 2rem;
            line-height: 2rem;
            margin-left: 0.5rem;
            float: left;
        }

        /*女左侧图片*/
        .female_container img {
            margin-left: 2rem;
            width: 2rem;
            height: 2rem;
            float: left;
        }

        /*女文字*/
        .female_container div {
            width: 2rem;
            line-height: 2rem;
            margin-left: 0.5rem;
            float: left;
        }

        /*开始鉴定container*/
        .btn_container {
            text-align: center;
            margin-top: 1rem;
        }

        /*开始鉴定 背景图片样式*/
        .btn_container img {
            height: 4rem;
            width: auto;
            z-index: 10;
        }

        /*阴影*/
        .shadow {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #000;
            opacity: 0.7;
            filter: alpha(opacity=70);
            z-index: 1;
            display: none;
        }

        /*加载*/
        #loading {
            width: 40%;
            height: auto;
            position: absolute;
            top: 35%;
            left: 30%;
            z-index: 3;
            background: #000;
            border-radius: 0.71rem;
            overflow: hidden;
            display: none;
        }

    </style>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?11869969a3b6834ebb1d5b9f3d9c7a5f";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body>
<div class="container">
    <!--背景图片-->
    <img class="bg_img" src="/static/identify_love/img/add_bg_img.jpg">
    <div id="tab-2" class="wrapper-content">
        <!--顶部图片-->
        <div class="header_container">
            <img class="header_img2" src="/static/identify_love/img/add_header2.png">
        </div>

        <!--中间内容部分-->
        <div class="content_container">
            <div class="content_bg"></div>
            <div class="user_img_container">
                <img class="user_master_img" src="/static/identify_love/img/add_user_master.png">
                <img class="user_img" src="{$data.icon_url}">
            </div>
            <div class="hint_label">输入你的出生信息与Ta鉴定真爱吧</div>
            <form action="##" onsubmit="return false" class="form" method="post" id="form">
                <!--出生时间-->
                <div class="form-group">
                    <div class="form-label">出生时间<span>Time of birth</span></div>
                    <div class="form-content timer">
                        <input id="timeResult"
                               data-options="{&quot;value&quot;:&quot;{$data.user.birth_time}&quot;,&quot;beginYear&quot;:1900,&quot;endYear&quot;:2099}"
                               name="birth_time" placeholder="出生时间（公历）" type="text" value="{$data.user.birth_time_input}" readonly unselectable="on">
                    </div>
                </div>
                <!--出生地点-->
                <div class="form-group" style="">
                    <div class="form-label">出生地点<span>Place of birth</span></div>
                    <div class="form-content" id='showCityPicker'>
                        <input id='cityResult' type="text" name="birth_place" placeholder="出生地点" value="{$data.user.birth_place}" readonly unselectable="on">
                    </div>
                </div>
                <!--性别-->
                <div class="form-group sex_container">
                    <div class="male_container" onclick="actionSex(1)">
                        <img id="male_selected_img" src="/static/identify_love/img/add_selected_img.png">
                        <div>男</div>
                    </div>
                    <div class="female_container" onclick="actionSex(2)">
                        <img id="female_selected_img" src="/static/identify_love/img/add_not_selected_img.png">
                        <div>女</div>
                    </div>
                    <input style="display:none;" type="text" id="sex" name="sex" value="1">
                </div>
                <!--档案id-->
                <input style="display:none;" type="text" id="uid" name="uid" value="{$data.uid}">
                <input style="display:none;" type="text" id="rid" name="rid" value="{$data.rid}">
                <input style="display:none;" type="text" id="name" name="name" value="{$data.name}">
                <input style="display:none;" type="text" id="avatar" name="avatar" value="{$data.icon_url}">
                <input style="display:none;" type="text" id="longitude" name="longitude" value="{$data.user.longitude}">
                <input style="display:none;" type="text" id="latitude" name="latitude" value="{$data.user.latitude}">

            </form>
        </div>
        <!--立即鉴定-->
        <div class="btn_container">
            <img src="/static/identify_love/img/add_button.png" onclick="checkForm()">
        </div>
    </div>
</div>
<div id="shadow" class="shadow"></div>
<div id="loading">
    <img src="/static/identify_love/img/loading.gif" alt="">
</div>

<script>

    actionSex({$data.sex});

    //表单提交
    function checkForm() {

        var form = document.getElementById('form');
        var time = form.birth_time.value;
        var place = form.birth_place.value;
        var sex = form.sex.value;
        var uid = form.uid.value;
        // var rid = form.rid.value;
        var name = form.name.value;
        var avatar = form.avatar.value;
        var longitude = form.longitude.value;
        var latitude = form.latitude.value;

        if (!time.trim()) {
            alert("请填写出生时间");
            return false;
        }
        if (!place.trim()) {
            alert("请填写出生地点");
            return false;
        }

        if (!uid.trim()) {
            alert("uid 为空!");
            return false;
        }
        if (!name.trim()) {
            alert("name 为空!");
            return false;
        }
        if (!avatar.trim()) {
            alert("avatar 为空!");
            return false;
        }
        if (!longitude.trim()) {
            alert("longitude 为空!");
            return false;
        }
        if (!latitude.trim()) {
            alert("latitude 为空!");
            return false;
        }

        document.getElementById('shadow').style.display = 'block';
        document.getElementById('loading').style.display = 'block';

        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/web/identify_love/save",//url
            data: $('#form').serialize(),
            success: function (result) {
                document.getElementById('shadow').style.display = 'none';
                document.getElementById('loading').style.display = 'none';
                if (result.code == 200) {
                    window.location.href = result.data;
                } else {
                    alert(result.msg);
                }
            },
            error: function (result) {
                document.getElementById('shadow').style.display = 'none';
                document.getElementById('loading').style.display = 'none';
                alert('异常！');
            }
        });
    }


    document.setTitle = function (t) {
        document.title = t;
        var i = document.createElement('iframe');
        i.src = '/favicon.ico';
        i.style.display = 'none';
        i.onload = function () {
            setTimeout(function () {
                i.remove();
            }, 0)
        };
        document.body.appendChild(i);
    };

    //选择性别事件
    function actionSex(sex) {
        var male_selected_img = document.getElementById('male_selected_img');
        var female_selected_img = document.getElementById('female_selected_img');
        var sexElement = document.getElementById('sex');
        sexElement.value = sex;
        //先设置为未选中的图片
        male_selected_img.src = '/static/identify_love/img/add_not_selected_img.png';
        female_selected_img.src = '/static/identify_love/img/add_not_selected_img.png';
        if (1 == sex) {
            male_selected_img.src = '/static/identify_love/img/add_selected_img.png';
            document.getElementById('sex').value = 1;
        } else {
            female_selected_img.src = '/static/identify_love/img/add_selected_img.png';
            document.getElementById('sex').value = 2;
        }
    }

    //微信分享 配置
    wx.config({
            debug: false,
            appId: '{$signPackage.appId}',
            timestamp: {$signPackage.timestamp
        },
        nonceStr
    :
    '{$signPackage.nonceStr}',
        signature
    :
    '{$signPackage.signature}',
        jsApiList
    :
    ['onMenuShareTimeline', 'onMenuShareAppMessage']
    })
    ;
    //微信分享 配置
    wx.ready(function () {
        wx.onMenuShareAppMessage({
            title: '{$share_title}',
            desc: '{$share_introduction}',
            link: '{$signPackage.url}',
            imgUrl: '{$share_img}',
            type: 'link',
            dataUrl: '',
            success: function () {

            },
            cancel: function () {

            }
        });
        wx.onMenuShareTimeline({
            title: '{$share_title}',
            link: '{$signPackage.url}',
            imgUrl: '{$share_img}',
            success: function () {

            },
            cancel: function () {

            }
        });
    });
</script>
{include file="../apps/web/view/public/sensors.html" /}
</body>
</html>
